<template>
  <div class="mask-fixed" @click="close">
    <div class="background"></div>
    <div class="content anim-swiper-UpIn">
      <h2>{{selectDatas.title}}</h2>
      <ul class="lists" @click="select">
        <li class="hairlines" v-for="(list, index) in selectDatas.lists" :key="index" :data-id="list.id">
          {{list.value}}
        </li>
      </ul>
      <div class="cancel">
        <input type="button" value="取消" @click="close">
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'Select',
    props: {
      selectDatas: Object
    },
    methods: {
      close: function (event) {
        let target = event.target
        if (target.classList.contains('mask-fixed') || target.nodeName.toLowerCase() === 'input') {
          this.$emit('hideSelect')
        }
      },
      select: function (event) {
        let target = event.target
        let did = ''
        let value = ''
        if (target.nodeName.toLowerCase() === 'li') {
          value = target.innerText
          did = target.getAttribute('data-id')
          this.$emit('selectConfirm', {id: did, value: value})
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import '../../assets/css/function.scss';
  .mask-fixed{
    .content{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background: #fff;
      h2{
        height: rem(100);
        line-height: rem(100);
        background: #f0eff5;
        font-size: rem(38);
        color: #333;
      }
      .lists{
        border-bottom: rem(16) solid #f0eff5;
        font-size: rem(32);
        color: #666;
        li{
          height: rem(90);
          line-height: rem(90);
        }
      }
      .cancel{
        input{
          display: block;
          width: 100%;
          height: rem(100);
          background: #fff;
          font-size: rem(34);
          color: #333;
        }
      }
    }
  }
</style>
